/**
 * Created by Administrator on 2017/10/12.
 */
import React from 'react';
import css from './index.less';
import PropTypes from 'prop-types';

export default class Input extends React.Component {
  constructor(props) {
    super(props);
  }

  static propTypes = {
    label: PropTypes.any,
    value: PropTypes.any,
    unit: PropTypes.any,
    type: PropTypes.string,
    placeholder: PropTypes.any,
    onChange: PropTypes.func,
    disabled: PropTypes.bool,
  };

  static defaultProps = {
    label: '二级标题',
    value: '',
    unit: 'px',
    type: 'text',
    placeholder: '',
    onChange: () => {},
    disabled: false,
  };

  render() {
    const { label, onChange, placeholder, value, unit, disabled, type } = this.props;
    return (
      <div className={css.wrap}>
        <div className={css.label}>
          &bull; {label}
        </div>
        <div className={css.value}>
          <input value={value}
                 type={type}
                 placeholder={placeholder}
                 disabled={disabled}
                 onChange={(e) => {
                   onChange(e.target.value);
                 }} />
        </div>
        <div className={css.unit}>
          {unit}
        </div>
      </div>
    );
  }
}
